<template>
  <div class="wrap">
    <CnBoldP class="mt-11 text-20">快捷配置</CnBoldP>
    <CnNormalP class="mt-6 mb-20 text-4xText"
      >目前仅支持 "合格标准" / "采集频率" 两种快捷配置</CnNormalP
    >
    <ProductFilesItem></ProductFilesItem>

    <div class="card_box">
      <itemCard
        class="card_item animate__animated animate__backInUp"
        v-for="(cl, index) in cardList"
        :key="index"
        :cardTitle="cl.title"
        :imgUrl="cl.imgUrl"
        :toPagePath="cl.toPagePath"
      ></itemCard>
    </div>
  </div>
</template>

<script lang="ts">
  import {defineComponent, ref} from 'vue'
  export default defineComponent({
    name: 'QuickConfiguration'
  })
</script>
<script lang="ts" setup>
  // 引入
  import itemCard from './components/itemCard/index.vue'
  import {ProductFilesItem} from '@/components/others/productFilesItem'
  import {CnNormalP, CnBoldP} from '@/components/text'
  import useGlobalAPI from '@/hooks/useGlobalAPI'
  const {router} = useGlobalAPI()

  // 卡片数据
  const cardList = ref([
    {
      title: '合格标准',
      imgUrl: 'https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/hege_icon.png',
      toPagePath: '/quickConfigurationStandard/home'
    },
    {
      title: '采集频率',
      imgUrl: 'https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/pinlv_icon.png',
      toPagePath: '/quickConfigurationFrequency/home'
    },
    {
      title: '设备预警',
      imgUrl: 'https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/yujing_icon.png',
      toPagePath: '/quickConfigurationWarnEarly/home'
    }
  ])
</script>

<style lang="less" scoped>
  .card_box {
    width: 100%;
    display: flex;
    flex-direction: row;
    // justify-content: ;

    .card_item {
      animation-duration: 0.8s;
      margin-right: 40px;
    }
  }
</style>
